<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery图片全屏滚动自适应浏览器分辨率宽度焦点图片滚动</title>

<link rel="stylesheet" href="css/banner.css">
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.foucs.js" type="text/javascript"></script>
</head>
<body>

<div class="focusbox">
	<div id="fullbanner">
		<div class="wrappic">
			<ul>
				<li class="plan" ><a href="javascript:;" target="_blank"><img width="1100" height="400" src="images/banner1.png" alt=""></a></li>
				<li class="plan"><a href="javascript:;" target="_blank"><img width="1100" height="400" src="images/banner2.png" alt=""></a></li>
				<li class="plan"><a href="javascript:;" target="_blank"><img width="1100" height="400" src="images/banner3.png" alt=""></a></li>
				<li class="plan" ><a href="javascript:;" target="_blank"><img width="1100" height="400" src="images/banner4.png" alt=""></a></li>
				<li class="plan" ><a href="javascript:;" target="_blank"><img width="1100" height="400" src="images/banner5.png" alt=""></a></li>
			</ul>
		</div>
		
		<div class="helper">
			<div class="mask-left"></div>
			<div class="mask-right"></div>
			<a href="javascript:;" class="prev arrow-left leftbtn">《</a>
			<a href="javascript:;" class="next arrow-right rightbtn">》</a>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	$.foucs({
		direction: 'right'
	});
});
</script>


</body></html>